import React, { useEffect, useState, memo } from "react";
import { ShopcarTableStyle } from "./ShopcarTable.style";
import Scroll from '@/baseUI/scroll'
import { connect } from "react-redux"
import * as Action from "../../../pages/home/store/actionCreators"
const ShopcarTable = (props) => {
    // console.log(props, "----------------");
    // console.log(props.img);
    let datas = props.datas;
    console.log(datas, "---------------------");
    const { picUrl, prc, id, desc } = datas.datas;
    // const { imgLists = [], longpic, productSize = [] } = datas.datas.details;
    const { shopcar } = props
    const { setItemToShopcar } = props;
    const { productSize } = datas.datas.details;
    console.log(productSize, "-----------");

    const [inputNumber, setInputNumber] = useState(1);
    const [goto, setGoto] = useState('');

    const [checkIndex, setCheckIndex] = useState(null);

    const checkinput = (e) => {

        if (e.target.value.length > 1) {
            let regex = /^0*/g;
            var value = e.target.value.replace(regex, '');
            if (value > 20) {
                value = 20;
            }
            if (value < 0) {
                value = 0;
            }
            setInputNumber(value);
        }
        else {
            setInputNumber(e.target.value);
        }

    }
    useEffect((e) => {
        if (props.shopcarDisplay == 1) {
            setGoto("加入购物车");

        } else {
            setGoto("立刻购买")
        }

    }, [])
    const chosebutton = (item) => {
        // console.log('====', index)
        // console.log(e)
        // let size = e.target.innHtml;
        // console.log(e.target.innerHTML);
        // console.log(e.target.__reactFiber$x7h2e09vlvi.key);
        // let index = parseInt(e.target.__reactFiber$x7h2e09vlvi.key);
        // console.log(item);
        console.log(item, "---------")
        setCheckIndex(item.id)
    }
    const inputShopcar = () => {

        // 需要完善判断 checkIndex 是否为null
        // 如果为null 则不允许以下代码，而是弹出提示框提示选择规模并在1s后消失

        let shopcaritem = {
            desc: desc,
            id: id,
            picUrl: picUrl,
            prc: prc,
            size: productSize[checkIndex - 1].size,
            num: inputNumber,
            check: false
        }
        // console.log(shopcaritem);
        setItemToShopcar(shopcaritem);
    }
    const decrement = () => {
        console.log("减操作");
        // console.log(inputNumber - 1 * 1)
        if (inputNumber >= 1) {
            setInputNumber(inputNumber - 1 * 1);
            return
        } else {
            return
        }
        // console.log(inputNumber);
    }

    const increment = () => {
        console.log("加操作");
        if (inputNumber < 20)
            setInputNumber(inputNumber * 1 + 1 * 1);
        console.log(inputNumber);
    }
    return (
        <ShopcarTableStyle >
            <div className="shopcar_heade">
                <div className="head_container">
                    <div className="float-img" onClick={() => props.setShopcarDisplay(false)} >
                        <svg t="1642078904413" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1995" width="200" height="200"><path d="M813.653333 802.986667a42.666667 42.666667 0 0 1-60.373333 0L512 561.706667 270.72 802.986667a42.666667 42.666667 0 1 1-60.373333-60.373334L451.626667 501.333333 210.346667 260.053333a42.666667 42.666667 0 0 1 30.293333-72.746666 42.666667 42.666667 0 0 1 30.08 12.373333L512 440.96 753.28 199.68a42.666667 42.666667 0 0 1 72.746667 30.293333 42.666667 42.666667 0 0 1-12.373334 30.08L572.373333 501.333333l241.28 241.28a42.666667 42.666667 0 0 1 0 60.373334z" p-id="1996"></path></svg>
                    </div>
                    <div className="left_pic">
                        <img src={picUrl} />
                    </div>
                    <div className="right_box">
                        <div className="box_body">
                            <svg t="1642076155433" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8733" width="200" height="200"><path d="M851.2 57.6 608 465.066667l211.2 0 0 72.533333L561.066667 537.6l0 115.2 260.266667 0L821.333333 725.333333 561.066667 725.333333l0 241.066667-96 0L465.066667 725.333333 206.933333 725.333333l0-72.533333 258.133333 0 0-115.2L206.933333 537.6l0-72.533333 211.2 0L172.8 57.6l106.666667 0 234.666667 401.066667L746.666667 57.6 851.2 57.6z" p-id="8734"></path></svg>
                            <div className="money">{prc}</div>
                            <div className="mid"> <svg t="1642077254025" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1628" width="200" height="200"><path d="M486.4 102.4l51.2 0 0 819.2-51.2 0 0-819.2Z" p-id="1629" fill="#8a8a8a"></path></svg> </div>
                            <svg t="1642076556589" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9553" width="200" height="200"><path d="M419.886252 370.432927c119.605022 0 243.995044-26.302516 318.706976-76.460106v91.304594h69.207683V185.366307C807.800911 65.18189 607.999688 0.289697 420.006126 0.289697S32.091467 65.18189 32.091467 185.366307v545.629859c0 120.184417 199.801223 185.076609 387.794785 185.07661V846.984967c-197.463666 0-318.706976-67.579385-318.706976-115.978811V566.977553c74.711932 50.037714 198.992069 76.460105 318.706976 76.460105v-69.217673c-197.463666 0-318.706976-67.569395-318.706976-115.968822V294.102686c74.711932 50.027725 199.111944 76.330241 318.706976 76.330241z m0-301.045432c197.473655 0 318.706976 67.579385 318.706976 115.978812 0 48.399426-121.24331 115.978811-318.706976 115.978811s-318.706976-67.579385-318.706976-115.978811c0.00999-48.399426 121.363185-115.978811 318.706976-115.978812z m310.056015 338.925849c-171.740545 0-261.536715 66.060971-261.536714 131.29281v350.623625c0 65.231838 89.906055 131.292809 261.536714 131.29281 170.461881 0 260.128186-65.121953 261.526725-129.894271h0.119875V539.616143c-0.119875-65.241827-89.906055-131.302799-261.6466-131.302799z m0 69.097799c126.967329 0 192.438916 43.604437 192.438917 62.195011s-65.471587 62.195011-192.438917 62.195011-192.438916-43.604437-192.438916-62.195011 65.471587-62.195011 192.438916-62.195011z m0 475.013648c-126.967329 0-192.438916-43.604437-192.438916-62.195012v-83.712527c43.844186 23.855073 108.26687 39.758456 192.438916 39.758456 84.172047 0 148.474855-15.893393 192.438917-39.758456v83.712527c0 18.590574-65.471587 62.195011-192.438917 62.195012z m0-175.366756c-126.967329 0-192.438916-43.614426-192.438916-62.195011v-83.712527c43.844186 23.855073 108.26687 39.748466 192.438916 39.748466 84.172047 0 148.474855-15.893393 192.438917-39.748466v83.712527c0 18.580585-65.471587 62.195011-192.438917 62.195011z m0 0" fill="#0f1520" p-id="9554"></path></svg>
                            <div className="integral">{prc * 10}</div>
                        </div>
                        {/* <div className="box_footer">已选: 110cm</div> */}
                    </div>
                </div>
            </div>
            <div className="shopcar_middle">
                <div className="head_middle"></div>
                <Scroll
                    direction={'vertical'}
                    refresh={false}
                >
                    <div className="middle_contaner">
                        <div className="chosesize">
                            <div className="zhanwei"></div>
                            <div className="fonttitle">规格</div>
                            <div className="sizes">
                                {
                                    productSize.map((item) => {
                                        return (
                                            <div className={checkIndex == item.id ? 'active' : 'asize'} key={item.id} onClick={chosebutton.bind(null, item)}>{item.size}</div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className="chosenumber">
                            <div className="fonttitle">数量</div>
                            <div className="sizes">
                                <div className="changenumber">
                                    <div className="decrement" onClick={decrement}> <svg t="1642149716755" className="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2747" width="200" height="200"><path d="M863.74455 544.00086 163.424056 544.00086c-17.664722 0-32.00086-14.336138-32.00086-32.00086s14.336138-32.00086 32.00086-32.00086l700.320495 0c17.695686 0 31.99914 14.336138 31.99914 32.00086S881.440237 544.00086 863.74455 544.00086z" p-id="2748"></path></svg></div>
                                    <input type="number" placeholder="1" value={inputNumber} onChange={checkinput} />
                                    <div className="increment" onClick={increment}><svg t="1642149640332" className="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1884" width="200" height="200"><path d="M863.328262 481.340895l-317.344013 0.099772L545.984249 162.816826c0-17.664722-14.336138-32.00086-32.00086-32.00086s-31.99914 14.336138-31.99914 32.00086l0 318.400215-322.368714-0.17718c-0.032684 0-0.063647 0-0.096331 0-17.632039 0-31.935493 14.239806-32.00086 31.904529-0.096331 17.664722 14.208843 32.031824 31.871845 32.095471l322.59234 0.17718 0 319.167424c0 17.695686 14.336138 32.00086 31.99914 32.00086s32.00086-14.303454 32.00086-32.00086L545.982529 545.440667l317.087703-0.099772c0.063647 0 0.096331 0 0.127295 0 17.632039 0 31.935493-14.239806 32.00086-31.904529S880.960301 481.404542 863.328262 481.340895z" p-id="1885"></path></svg></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Scroll>
            </div>
            <div className="shopcar_footer">
                <div className="footer_box">
                    <div className="title" onClick={inputShopcar}>{goto}</div>
                </div>
            </div>
        </ShopcarTableStyle>
    )
}

const mapStateToPorps = (state) => {
    return {
        shopcar: state.home.shopcar
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        setItemToShopcar(item) {
            dispatch(Action.InsertShopcar(item));
        }
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(memo(ShopcarTable))